<script>
  // Current category
  var settings_current_category = 'table_settings';
</script>

    <div id="sidebar" style="width:210px;">
      <ul id="sidenav">
        <li class="act" val="table_settings"><a><?=$lang_label['mpl_table_of_results']?></a></li>
        <li val="character_manager"><a><?=$lang_label['mpl_character_manager']?></a></li>
        <li val="language_settings"><a><?=$lang_label['mpl_language_selector']?></a></li>
      </ul>
      <button class="thoughtbot" style="position:absolute;bottom:13px;left:13px;height:30px;display:none;"><?=$lang_label['mpl_save_settings']?></button>

    </div>

    <!-- Table of results [ -->
    <form id="table_settings">
      <fieldset class="container">
        <fieldset class="checkboxes">
          <label><?=$lang_label['mpl_show']?></label>
          <label class="label_radio" for="radio-21"><input name="weak" id="radio-21" value="1" type="radio"<?=($settings['weak']==1)?' checked="checked"':''?>/><?=$lang_label['mpl_lower_rank']?></label>
          <label class="label_radio" for="radio-22"><input name="weak" id="radio-22" value="0" type="radio"<?=($settings['weak']==0)?' checked="checked"':''?>/><?=$lang_label['mpl_higher_rank']?></label>
        </fieldset>
        <fieldset class="radios">
          <label><?=$lang_label['mpl_sort_by']?></label>
          <label class="label_radio" for="radio-01"><input name="sort_by" id="radio-01" value="1" type="radio"<?=($settings['sort_by']==1)?' checked="checked"':''?>/><?=$lang_label['int_rang']?></label>
          <label class="label_radio" for="radio-02"><input name="sort_by" id="radio-02" value="2" type="radio"<?=($settings['sort_by']==2)?' checked="checked"':''?>/><?=$lang_label['int_name']?></label>
          <label class="label_radio" for="radio-03"><input name="sort_by" id="radio-03" value="3" type="radio"<?=($settings['sort_by']==3)?' checked="checked"':''?>/><?=$lang_label['int_clan']?></label>
          <label class="label_radio" for="radio-04"><input name="sort_by" id="radio-04" value="4" type="radio"<?=($settings['sort_by']==4)?' checked="checked"':''?>/><?=$lang_label['int_level']?></label>
          <label class="label_radio" for="radio-05"><input name="sort_by" id="radio-05" value="5" type="radio"<?=($settings['sort_by']==5)?' checked="checked"':''?>/><?=$lang_label['int_honor']?></label>
          <label class="label_radio" for="radio-06"><input name="sort_by" id="radio-06" value="6" type="radio"<?=($settings['sort_by']==6)?' checked="checked"':''?>/><?=$lang_label['int_cofficient']?></label>
        </fieldset>
        <fieldset class="radios">
          <label><?=$lang_label['mpl_rows']?></label>
          <label class="label_radio" for="radio-11"><input name="items" id="radio-11" value="15" type="radio"<?=($settings['items']==15)?' checked="checked"':''?>/>15</label>
          <label class="label_radio" for="radio-12"><input name="items" id="radio-12" value="30" type="radio"<?=($settings['items']==30)?' checked="checked"':''?>/>30</label>
          <label class="label_radio" for="radio-13"><input name="items" id="radio-13" value="45" type="radio"<?=($settings['items']==45)?' checked="checked"':''?>/>45</label>
          <label class="label_radio" for="radio-14"><input name="items" id="radio-14" value="60" type="radio"<?=($settings['items']==60)?' checked="checked"':''?>/>60</label>
        </fieldset>
      </fieldset>
    </form>
    <!-- ] Table of results -->

    <!-- Character manager [ -->
    <form id="character_manager" onSubmit="return false;">
      <fieldset class="container">
        <div id="character_manager_form_container">
          <input type="text" name="login" value="<?=$lang_label['mpl_chr_login']?>">
          <button class="thoughtbot right"><?=$lang_label['mpl_btn_add']?></button>
        </div>
        <div class="clear"></div>
        <fieldset class="characters-list">
        
        </fieldset>
      </fieldset>
    </form>
    <!-- ] Character manager -->
    
    <!-- Language settings [ -->
    <form id="language_settings">
      <fieldset class="container">
        Yura will complite it
      </fieldset>
    </form>
    <!-- ] Language settings -->
    <script>
        /* General [ */
          $('#sidebar > button.thoughtbot').click(function(){
            if(settings_current_category == 'table_settings'){
              $.ajax({
                url: 'index.php?ajax=save_table_settings',
                data: $('#table_settings').serialize(),
                type: 'POST',
                dataType: 'html',
                error:function (xhr, ajaxOptions, thrownError){
                  $('#modal-window').empty().html('<div class="error-message">'+xhr.statusText+'</div>');
                },
                success: function(html){
                  $('#sidebar > button.thoughtbot').fadeOut();
                },
                complete: function(){
                    $('#modal-window-container').find('div.close-button').unbind('click').click(function(){
                      window.location = "/";
                    });
                }
              });
            }
          });
          $('#modal-window #sidenav>li').click(function(){
            $('#sidenav>li.act').removeClass('act');
            $(this).addClass('act');
            settings_current_category = $(this).attr('val');
            $('#modal-window > form').hide();
            $('#modal-window > #'+settings_current_category).show();
          });
        /* ] General */

        /* Table of results [ */
        $('.label_check, .label_radio').click(function(){
            $('#sidebar > button.thoughtbot').fadeIn();
            setupLabel();
        });
        setupLabel(); 
        /* ] Table of results */
        
        /* Character manager [ */
        var pass_input = document.createElement('input');
        pass_input.name = 'password';
        pass_input.type = 'text';
        pass_input.value = '<?=$lang_label['mpl_chr_password']?>';
        document.getElementById('character_manager_form_container').appendChild(pass_input);
        $('#character_manager_form_container > input').focus(function(){
            if($(this).attr('name') == 'login' && $(this).val() == '<?=$lang_label['mpl_chr_login']?>'){ $(this).val('');}
            if($(this).attr('name') == 'password'){
              pass_input.type = 'password';
              if($(this).val() == '<?=$lang_label['mpl_chr_password']?>'){ $(this).val('');}
            }
        }).blur(function(){
            if($(this).attr('name') == 'login' && $(this).val() == ''){ $(this).val('<?=$lang_label['mpl_chr_login']?>');}
            if($(this).attr('name') == 'password'){
              if($(this).val() == ''){
                pass_input.type = 'text';
                $(this).val('<?=$lang_label['mpl_chr_password']?>');
              }
            }
        });
        /* ] Character manager */
    </script>